import QtQuick 2.0
import QtQuick.Layouts 1.0
import QtQuick.Controls 1.0
import QtQuick.Controls.Styles 1.0
import org.qtproject.qtquick 1.0
import "qrc:/js/resource/Constants.js" as Constant

import "../common"
import "../configure"

Item {
    id: id_MainPage
    width: Constant.width * m_ratio
    height: Constant.height * m_ratio

    property real tab_width : width / 6;

    property real m_ratio: ApplicationInfo.ratio


    TabView {
        id: id_TabView
        anchors.fill: parent
        style: id_tabViewStyle

        Tab {
            title: qsTr("PLAYING")
        }

        Tab {
            title: qsTr("SEARCHING")
        }

        Tab {
            title: qsTr("SEARCH ON YOUTUBE")
        }

        Tab {
            title: qsTr("DOWNLOADING")
        }

        Tab {
            title: qsTr("DATABASE MANAGER")
        }

        Tab {
            title: qsTr("SETTING")
        }
    }

    // style
    Component {
        id: id_tabViewStyle
        TabViewStyle {
            tabsAlignment: Qt.AlignVCenter
            tabOverlap: 0
            frame: Item { }
            tab: Item {
                implicitWidth: tab_width
                implicitHeight: 60 * m_ratio
                BorderImage {
                    anchors.fill: parent
                    border.bottom: 10 * m_ratio
                    border.top: 10 * m_ratio
                    source: styleData.selected ? "qrc:/staticdata/resource/static/tab_selected.png":"qrc:/staticdata/resource/static/tabs_standard.png"
                    Text {
                        anchors.centerIn: parent
                        color: "white"
                        text: styleData.title.toUpperCase()
                        font.pixelSize: 15 * m_ratio
                    }
                    Rectangle {
                        visible: index > 0
                        anchors.top: parent.top
                        anchors.bottom: parent.bottom
                        anchors.margins: 10 * m_ratio
                        width:1 * m_ratio
                        color: "#3a3a3a"
                    }
                }
            }
        }
    }
}
